<template>
  <div class="app-container d-flex items-center justify-center" style="min-height:100vh;">
    <div class="card d-flex items-center" style="max-width:800px;width:90%;">
      <div class="flex-1 mr-4">
        <div class="text-xxl font-bold mb-3">500</div>
        <div class="mb-6">
          <h2>服务器内部错误</h2>
          <p>服务器遇到了一个意外的情况，暂时无法完成您的请求</p>
        </div>
        <div class="d-flex" style="gap:16px;flex-wrap:wrap;">
          <el-button type="primary" @click="goHome">
            <el-icon><HomeFilled /></el-icon>
            返回首页
          </el-button>
          <el-button @click="refresh">
            <el-icon><Refresh /></el-icon>
            刷新页面
          </el-button>
          <el-button type="info" @click="goBack">
            <el-icon><Back /></el-icon>
            返回上页
          </el-button>
        </div>
      </div>
      <div class="opacity-50">
        <el-icon :size="200" color="#ddd">
          <Tools />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { HomeFilled, Back, Refresh, Tools } from '@element-plus/icons-vue'

const router = useRouter()

const goHome = () => {
  router.push('/')
}

const goBack = () => {
  router.back()
}

const refresh = () => {
  window.location.reload()
}
</script>

<style lang="scss" scoped></style>
